import { VerticalBox , HorizontalBox} from "std-widgets.slint";
import { CellWidget } from "cell.slint";
import { NoteValueWidget } from "note_value.slint";
import { NoteStateWidget } from "note_state.slint";
import { Plot } from "../widgets/plot.slint";
import { BMSModelService } from "../models/bms.slint";

export component BMSView inherits Rectangle {
    background: #ffffff00;
    VerticalBox {
        spacing: 5px;
        HorizontalBox {
            alignment: center;
            for cell in [0,1,2,3,4] : CellWidget { 
                width: 18%;
                cell-number: cell + 1; 
                voltage: BMSModelService.bms-info.cell-voltage[cell]; 
                balance: BMSModelService.bms-info.balance[cell];
            }
        }
        HorizontalBox {
            alignment: center;
            NoteValueWidget { 
                width: 18%;
                title: "Voltage";
                text: BMSModelService.bms-info.voltage+"V";
            }
            NoteValueWidget { 
                width: 18%;
                title: "Current";
                text: BMSModelService.bms-info.current+"A";
            }
            NoteValueWidget { 
                width: 18%;
                title: "Temperature";
                text: BMSModelService.bms-info.temperature+"℃";
            }
            NoteStateWidget { 
                width: 18%;
                title: "DSG";
                state: BMSModelService.bms-info.dsg;
            }
            NoteStateWidget { 
                width: 18%;
                title: "CHG";
                state: BMSModelService.bms-info.chg;
            }
        }

        HorizontalBox {
            alignment: center;
            padding: 0;
            Rectangle {
                padding: 0;
                width: 45%;
                Plot { 
                    x: 0;
                    y: 0;
                    width: 100%;
                    height: 100%;
                    title: "Voltage plot"; 
                    source: BMSModelService.build-v-plot(self.width, self.height);
                }
            }
            Rectangle {
                padding: 0;
                width: 45%;
                Plot {
                    x: 0;
                    y: 0;
                    width: 100%;
                    height: 100%;
                    title: "Current plot"; 
                    source: BMSModelService.build-c-plot(self.width, self.height);
                }
            }
        }
        Rectangle{

        }
    }
}